import React, { useState, useEffect } from 'react'
import { Layout, Card, Text, message, Tabs, TabPanel, Button, InputNumber, Checkbox, PopConfirm } from 'tea-component'
import SelectModel from './SelectModel'
import CompleteConfiguration from './CompleteConfiguration'
import ConfirmConfiguration from './ConfirmConfiguration'
import styles from './index.module.less'
import { useNavigate } from 'react-router-dom'

const { Body, Content } = Layout

export default function LayoutContentWithTabsExample() {
  const [activeId, setActiveId] = useState('basic')
  const [activeIndex, setActiveIndex] = useState(0)
  const [isAgree, setIsAgree] = useState()
  const navigate = useNavigate()

  const tabs = [
    { id: 'basic', label: '1.Select Model' },
    { id: 'network', label: '2.Complete Configuration' },
    { id: 'monitor', label: '3.Confirm Configuration' }
  ]

  useEffect(() => setActiveId(tabs[activeIndex].id), [activeIndex])

  return (
    <div>
      <Card className={styles['top-card']}>
        <Card.Body title={<a style={{ fontSize: '18px' }}>Custom Configuration</a>}></Card.Body>
      </Card>
      <Card className={styles['buy-page']}>
        <Card.Body>
          <Tabs
            className={styles['tabs']}
            activeId={activeId}
            ceiling
            animated={false}
            tabs={tabs}
            placement={'top'}
            onActive={e => {
              setActiveId(e.id)
              setActiveIndex(tabs.findIndex(n => n.id === e.id))
            }}
          >
            <TabPanel id="basic">
              <div style={{ paddingTop: '30px' }}>
                <SelectModel />
              </div>
            </TabPanel>
            <TabPanel id="network">
              <div style={{ paddingTop: '30px' }}>
                <CompleteConfiguration />
              </div>
            </TabPanel>
            <TabPanel id="monitor">
              <div style={{ paddingTop: '30px' }}>
                <ConfirmConfiguration />
              </div>
            </TabPanel>
          </Tabs>
        </Card.Body>
        <div className={styles['shop-submit']}>
          <div className={styles.left}>
            <p className={styles['label-item']}>Select Model</p>
            <p className={styles['label-item']}>SA2.SMALL2(Standard S6, 1-core, 1GB)</p>
            <p className={styles['label-item']}>
              <span style={{ marginRight: '10px' }}>Amount</span>
              <InputNumber value={1} max={64} />
            </p>
          </div>
          <div className={styles.right}>
            <div className={styles['cost-about__item-cell']}>
              <p className={styles['label-item']}>Configuration Fee 0.02USD/hr</p>
              <p className={styles['label-item']}>Network Fee 0.08USD/GB</p>
            </div>
            <div className={styles['cost-about__item-cell']}>
              <div className={[styles['label-item'], styles['flex-end']].join(' ')}>
                {activeIndex == 2 && (
                  <>
                    <PopConfirm
                      placement="top"
                      visible={isAgree === false}
                      message={<div style={{ color: 'red' }}>Please read the policy and check "I agree"</div>}
                    >
                      <Checkbox value={isAgree} style={{ display: 'flex' }} onChange={setIsAgree}>
                        Agree<a>"Tencent Cloud Service Terms"</a>
                      </Checkbox>
                    </PopConfirm>
                  </>
                )}
              </div>
              <div className={[styles['label-item'], styles['flex-end']].join(' ')}>
                {activeIndex > 0 && (
                  <Button
                    type="weak"
                    style={{ marginRight: '12px' }}
                    onClick={() => setActiveIndex(Math.max(0, activeIndex - 1))}
                  >
                    Previous
                  </Button>
                )}
                {activeIndex === 2 ? (
                  <Button
                    type="pay"
                    onClick={() => {
                      if (!isAgree) return setIsAgree(false)
                      const cvmList = JSON.parse(localStorage.getItem('cvm-list')!)

                      localStorage.setItem('cvm-list', JSON.stringify(cvmList.concat(cvmList[0])))
                      message.success({
                        content: 'Create success！'
                      })
                      navigate('/console/instance')
                    }}
                  >
                    Enable
                  </Button>
                ) : (
                  <Button type="primary" onClick={() => setActiveIndex(Math.min(2, activeIndex + 1))}>
                    Next: Complete Configuration
                  </Button>
                )}
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  )
}
